import React from "react";
import * as THREE from 'three';

class HelloWorld extends React.Component {
    render(): React.ReactNode {
        return (
            <div>
                <h3>Hello world</h3>
                <div id="demoHelloWorld"/>
            </div>
        )
    }

    componentDidMount(): void {
        const width = 800;
        const height = 500;
        const scene = new THREE.Scene();

        /**
         * 第一个参数：视野角度（FOV）
         * 第二个参数:长宽比（aspect ratio）
         * 第三个参数：远剪切面
         * 第四个参数：近剪切面
         */
        const camera = new THREE.PerspectiveCamera(100, width / height, 0.1, 1000);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 渲染器的大小尺寸
        renderer.setSize(width, height);

        const $el = document.getElementById('demoHelloWorld');
        if ($el) {
            $el.appendChild(renderer.domElement)
        }

        // 创建一个立方体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // 材质颜色：十六进制（hex colors）的颜色
        const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        // 网格
        const cube = new THREE.Mesh(geometry, material);
        // 坐标位置(0,0,0)
        scene.add(cube);
        // 移动相机位置（数值越大，相机距离物体位置越远）
        camera.position.z = 10;

        function animate() {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

        animate();
    }
}

export default HelloWorld;
